<template>
  <div>
    <div class="box5">
      <!-- 头部导航 -->
      <div class="header">
        <div class="button" @click="$router.go(-1)">
          <span class="iconfont icon-fanhui"></span>
        </div>
        <div class="center">
          <span @click="fase = 1" :class="fase == 1 ? 'spancon' : ''"
            >关注</span
          >
          <span @click="fase = 2" :class="fase == 2 ? 'spancon' : ''"
            >粉丝</span
          >
        </div>
        
        <!-- <router-link tag="div" to="/search" class="signout iconfont icon-sousuo"></router-link> -->
      </div>
      <div class="followcon">
        <div class="top">
          <div>按关注时间排序</div>
          <div>全部</div>
        </div>
      </div>
      <!-- 关注列表 -->
      <div v-show="fase == 1" class="followlists">
        <div class="shwos" v-show="!followlists.length">还没关注歌手，快去关注吧！</div>
        <div class="fol" v-for="(item, index) in followlists" :key="index">
          <div class="img">
            <img :src="item.avatarUrl" alt="" />
          </div>
          <div class="right">
            <div class="name">{{ item.nickname }}</div>
            <div>{{ item.eventCount }}</div>
          </div>
        </div>
      </div>
      <!-- 粉丝列表 -->
      <div v-show="fase == 2" class="followlists">
        <div class="shwos" v-show="!followlistss.length">还没有粉丝，去别处看看吧！</div>
        <div class="fol" v-for="(item, index) in followlistss" :key="index">
          <div class="img">
            <img :src="item.avatarUrl" alt="" />
          </div>
          <div class="right">
            <div class="name">{{ item.nickname }}</div>
            <div>{{ item.eventCount }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getUserFollows, getUserFolloweds } from "../api/userinfo";
export default {
  data() {
    return {
      fase: 1, //F切换
      followId: null, //用户ID
      followlists: [], //关注列表
      followlistss: [], //粉丝列表
    };
  },
  created() {
    let queryId = this.$route.query;
    this.followId = queryId.id;
    if (!("id" in queryId)) {
      this.$router.push("/userInfo");
    }
    //获取关注列表
    getUserFollows({ uid: this.followId }).then((data) => {
      console.log(data.follow);
      this.followlists = data.follow;
    });
    //获取用户粉丝列表
    getUserFolloweds({ uid: this.followId }).then((data) => {
      console.log(data.followeds);
      this.followlistss = data.followeds;
    });
  },
};
</script>

<style lang="less">
.box5 {
  .header {
    width: 375px;
    display: flex;

    z-index: 1;
    .button {
      width: 45px;
      height: 45px;
      line-height: 45px;
      text-align: center;

      left: 0;
      span {
        font-size: 25px;
        color: black;
      }
    }
    .center {
      height: 45px;
      line-height: 45px;
      text-align: center;
      color: #424040;
      font-size: 20px;
      margin: 0 auto;
      span {
        margin: 0 10px;
        padding: 5px 0;
      }
      .spancon {
        color: black;
        border-bottom: 2px solid #f75d5d;
        font-weight: 800;
      }
    }
    .signout {
      color: black;
      width: 45px;
      height: 45px;
      line-height: 45px;
      text-align: center;

      right: 0;
      font-size: 25px;
    }
  }
  .followcon {
    width: 100%;
    padding: 20px 0;
    .top {
      display: flex;
      justify-content: space-between;
      div {
        font-size: 16px;
        color: #232323;
        padding: 0 20px;
      }
    }
  }
  .followlists {
    width: 100%;
    .shwos{
        width: 100%;
        text-align: center;
        font-size: 20px;
        color: #fd5050;
        font-weight: 800;
        padding-top: 60px;
    }
    .fol {
      display: flex;
      padding-left: 20px;
      padding-bottom: 20px;
      img {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        .img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .right {
        width: 100%;
        margin-left: 10px;
        font-size: 14px;
        color: #a5a5a5;
        border-bottom: 1px solid #f3f3f3;
        padding-bottom: 5px;
        .name {
          font-size: 14px;
          padding-bottom: 10px;
          color: #251e1e;
          font-weight: 600;
        }
      }
    }
  }
}
</style>